<template>
  <div class="page-content">
    <el-button @click="showDialog('add')" v-ripple>添加banner</el-button>

    <art-table :data="tableData" :loading="loading" :currentPage="1" :pageSize="10" :total="total">
      <template #default>
        <el-table-column label="ID" prop="id" />
        <el-table-column label="标题" prop="title" />
        <el-table-column label="banner" prop="cover" #default="scope">
          <el-image
            style="width: 40px; height: 40px"
            :src="scope.row.cover"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[scope.row.cover]"
            show-progress
            fit="cover"
          />
        </el-table-column>
        <el-table-column label="链接" prop="url" />
        <el-table-column label="按钮名称" prop="button_name" />
        <el-table-column label="创建日期" prop="create_time" />
        <el-table-column fixed="right" label="操作" width="150px">
          <template #default="scope">
            <ArtButtonTable type="edit" @click="showDialog('edit', scope.row)" />
            <ArtButtonTable type="delete" @click="deleteUser(scope.row)" />
          </template>
        </el-table-column>
      </template>
    </art-table>

    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '添加banner' : '编辑banner'"
      width="40%"
    >
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="formData.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="链接" prop="url">
          <el-input v-model="formData.url" placeholder="请输入链接" />
        </el-form-item>
        <el-form-item label="封面" prop="cover">
          <ArtImageUpload v-model:files="formData.cover"></ArtImageUpload>
        </el-form-item>
        <el-form-item label="按钮名称" prop="button_name">
          <el-input v-model="formData.button_name" placeholder="请输入按钮名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { FormInstance } from 'element-plus'
  import { ElMessageBox, ElMessage } from 'element-plus'
  import type { FormRules } from 'element-plus'
  import { ContentService } from '@/api/common'

  const dialogType = ref('add')
  const dialogVisible = ref(false)

  const formData = reactive({
    title: '',
    url: '',
    cover: '',
    button_name: ''
  })
  const total = ref(0)
  const queryParams = reactive({
    page: 1,
    size: 10,
    cate_id: 5 //首页banner
  })

  const loading = ref(false)

  let tableData = reactive([])

  // 获取商品列表
  const getPage = async () => {
    loading.value = true
    const { data } = await ContentService.getListContent(queryParams)
    total.value = data.total
    Object.assign(tableData, data.data)
    loading.value = false
  }
  getPage()
  const showDialog = (type: string, row?: any) => {
    dialogVisible.value = true
    dialogType.value = type

    if (type === 'edit' && row) {
      formData.title = row.title
      formData.cover = row.cover
      formData.url = row.url
      formData.button_name = row.button_name
    } else {
      formData.title = ''
      formData.url = ''
      formData.button_name = ''
      formData.cover = ''
    }
  }

  const deleteUser = (row: any) => {
    ElMessageBox.confirm('确定要删除该banner吗？', '删除banner', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error'
    })
      .then(() => {
        return ContentService.deleteContent(row.id)
      })
      .then(() => {
        getPage()
        ElMessage.success('删除成功')
      })
  }

  const rules = reactive<FormRules>({
    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
    url: [{ required: true, message: '请输入链接', trigger: 'blur' }],
    cover: [{ required: true, message: '请选择封面', trigger: 'blur' }],
    button_name: [{ required: true, message: '请输入按钮名称', trigger: 'blur' }]
  })

  const formRef = ref<FormInstance>()

  const handleSubmit = () => {
    if (!formRef.value) return
    formRef.value.validate(async (valid) => {
      if (valid) {
        if (dialogType.value === 'add') {
          await ContentService.addContent(formData)
        } else {
          await ContentService.updateContent(formData)
        }
        await getPage()
        ElMessage.success(dialogType.value === 'add' ? '添加成功' : '更新成功')
        dialogVisible.value = false
      }
    })
  }
</script>

<style lang="scss" scoped>
  .page-content {
    width: 100%;
    height: 100%;

    .user {
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 6px;
      }

      > div {
        margin-left: 10px;

        .user-name {
          font-weight: 500;
          color: var(--art-text-gray-800);
        }
      }
    }
  }
</style>
